<template>
    <el-form inline :disabled="disabled">
      <el-form-item label="一级分类">
        <el-select v-model="category1Id" @change="category1Change">
          <el-option v-for="item in category1List"
                     :key="item.id" :label="item.name"
                     :value="item.id"
                      ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="二级分类" >
        <el-select v-model="category2Id" @change="category2Change">
          <el-option v-for="item in category2List"
                     :key="item.id" :label="item.name"
                     :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="三级分类">
        <el-select v-model="category3Id" @change="category3Change">
          <el-option v-for="item in category3List"
                     :key="item.id" :label="item.name"
                     :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
</template>

<script>
    export default {
        name: "CategorySelector",
        // props:{
        //   disabled:Boolean
        // },
        data(){
          return {
            category1List:[],
            category1Id:"",
            category2List:[],
            category2Id:"",
            category3List:[],
            category3Id:"",
            disabled:false
          }
        },
        methods:{
          async category1Change(){
            //当一级分类发生改变要重置 二三级分类的数据
            this.category2List=[],
            this.category2Id="",
            this.category3List=[],
            this.category3Id=""

            //拿到一级分类的id 去获取二级分类的数据
            const {data} = await this.$API.category.getCategorys2(this.category1Id);
            this.category2List = data;

            //将id 和 分类级别提供给外部逻辑
            this.$emit("categoryChange",{categoryId:this.category1Id, level:1})
          },

          async category2Change(){
            //当二级分类发生改变要重置 三级分类的数据
            this.category3List=[],
            this.category3Id=""

            //拿到二级分类的id 去获取三级分类的数据
            const {data} = await this.$API.category.getCategorys3(this.category2Id);
            this.category3List = data;

            //将id 和 分类级别提供给外部逻辑
            this.$emit("categoryChange",{categoryId:this.category2Id, level:2})
          },

          async category3Change(){
            //将id 和 分类级别提供给外部逻辑
            this.$emit("categoryChange",{categoryId:this.category3Id, level:3})
          },
        },
        async mounted(){
          // 默认获取一级分类的数据
          const {data} = await this.$API.category.getCategorys1()
          this.category1List = data;
        }
    }
</script>

<style scoped>

</style>
